<template>
    <div>
        <NavTop></NavTop>
        <el-table :data="orderData" :border="parentBorder" style="width: 60%;margin: auto;">
            <el-table-column type="expand">
                <template #default="props">
                    <div>
                        <el-table :data="props.row.child" :border="childBorder">
                            <el-table-column label="汽车编号" prop="id" />
                            <el-table-column label="车辆名称" prop="name" />
                            <el-table-column label="商品价格" prop="onlineprice" />
                            <el-table-column label="数量" prop="num" />
                            <el-table-column label="总价" prop="total" />
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="订单编号" prop="orderID" />
            <el-table-column label="订单日期" prop="time" />
            <el-table-column label="订单总数" prop="num" />
            <el-table-column label="商品总价" prop="sum" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="success" @click="buy(scope.$index)"
                        v-if="!scope.row.isOrder">支付</el-button>
                    <el-button size="small" type="success" @click="buy(scope.$index)" v-else disabled>已支付</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts" setup>
import NavTop from '@/components/NavTop.vue';
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
//从session中获取订单数据
const orderData = ref(JSON.parse(sessionStorage.getItem('order')))
const handleDelete = (index: number, row: User) => {
    ElMessageBox.confirm("你是否删除这个订单", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            orderData.value.splice(index, 1)
            //把更新后的数据重新放回到session里面
            sessionStorage.setItem("order", JSON.stringify(orderData.value))
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消购买",
            });
        });

}
const buy = (index) => {
    ElMessageBox.confirm("你是否确定购买这个商品", "提示", {
        confirmButtonText: "购买",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            //跳转到order界面
            orderData.value[index].isOrder = true
            sessionStorage.setItem("order", JSON.stringify(orderData.value))
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消购买",
            });
        });
}
</script>